<template>
    <div class="sidebar">
        <el-menu
                class="sidebar-el-menu"
                :default-active="onRoutes"
                :collapse="collapse"

                text-color="black"
                active-text-color="#20a0ff"
                unique-opened
                router
        >
            <template v-for="item in items">
                <template v-if="item.subs&&hasMenu(item.menuCode)">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                    v-if="subItem.subs"
                                    :index="subItem.index"
                                    :key="subItem.index"
                            >
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item
                                        v-for="(threeItem,i) in subItem.subs"
                                        :key="i"
                                        :index="threeItem.index"
                                >{{ threeItem.title }}
                                </el-menu-item>

                            </el-submenu>

                            <el-menu-item
                                    v-if="permissionContain(subItem.permissionList)&&!subItem.subs"
                                    :index="subItem.index"
                                    :key="subItem.index"
                            >{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-if="hasMenu(item.menuCode)&&!item.subs">
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>


    </div>
</template>

<script>
    import bus from '../common/bus';
    import { hasPermission, hasMenu, permissionListContain,getPermission } from '../../utils/authority';

    export default {
        data() {
            return {
                collapse: false,
                menuList: [],
                roleFlag: false,
                items: [
                    {
                        icon: 'el-icon-lx-home',
                        index: 'dashboard',
                        title: '系统首页',
                        menuCode: 'authority'
                    },
                    {
                        icon: 'el-icon-lock',
                        index: '1',
                        title: '商品管理',
                        menuCode: 'goods',
                        subs: [
                            {
                                index: 'goods',
                                title: '商品列表',
                                menuCode: 'goods',
                                permissionList: ['goods:select']
                            },
                            {
                                index: 'addGoods',
                                title: '添加商品',
                                menuCode: 'goods',
                                permissionList: ['goods:add']
                            },
                            {
                                index: 'goodsType',
                                title: '商品类别',
                                menuCode: 'goods',
                                permissionList: ['goods:select']
                            }
                        ]
                    },
                    {
                        icon: 'el-icon-lock',
                        index: '2',
                        title: '权限管理',
                        menuCode: 'authority',
                        subs: [
                            {
                                index: 'authority',
                                title: '权限列表',
                                menuCode: 'authority',
                                permissionList: ['authority:select']
                            },
                            {
                                index: 'role',
                                title: '角色管理',
                                menuCode: 'authority',
                                permissionList: ['role:select', 'role:add', 'role:delete', 'role:update']
                            },
                            {
                                index: 'users',
                                title: '用户管理',
                                menuCode: 'user',
                                permissionList: ['role:select', 'role:add', 'role:delete', 'role:update']
                            }
                        ]
                    },
                    {
                        icon: 'el-icon-menu',
                        index: '3',
                        title: '系统监控',
                        menuCode: 'authority',
                        subs: [

                            {
                                index: 'online',
                                title: '在线用户',
                                menuCode: 'authority',
                                permissionList: ['authority:select']
                            },
                            {
                                index: 'systemLog',
                                title: '系统日志',
                                menuCode: 'authority',
                                permissionList: ['authority:select']
                            },
                            {
                                index: 'loginLog',
                                title: '登录日志',
                                menuCode: 'authority',
                                permissionList: ['role:select', 'role:add', 'role:delete', 'role:update']
                            },

                        ]
                    },

                    {
                        icon: 'el-icon-s-goods',
                        index: 'orderform',
                        title: '订单管理',
                        menuCode: 'orderform'
                    }, {
                        icon: 'el-icon-box',
                        index: 'stock',
                        title: '仓库管理',
                        menuCode: 'stock'
                    }, {
                        icon: 'el-icon-s-custom',
                        index: 'worker',
                        title: '员工管理',
                        menuCode: 'worker'
                    }
                ]
            };
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace('/', '');
            }
        },
        beforeCreate() {

        },
        created() {

            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
                bus.$emit('collapse-content', msg);
            });
        },
        methods: {

            permissionContain(permissionList) {
                return permissionListContain(permissionList);
            },
            hasPermission(permission) {
                return hasPermission(permission);
            },
            hasMenu(menuCode) {
                return hasMenu(menuCode);
            },
        }
    };
</script>

<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar > ul {
        height: 100%;
    }
</style>
